<template>
    <div class="administration">
        <el-header>
            <p>用户管理</p>
        </el-header>
        <el-main>
            <div class="search-top">
                <el-row type="flex" justify="space-between">
                    <el-col :span="9">
                        <div class="grid-content">
                            <el-input placeholder="用户ID/用户名/绑定手机号/车辆VIN码" prefix-icon="el-icon-search" v-model="keyword"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <span>状态</span>
                            <el-select v-model="state" style="width: 90px">
                                <el-option value="启用"></el-option>
                                <el-option value="不启用"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <span>性别</span>
                            <el-select v-model="sex" style="width: 70px">
                                <el-option value="男"></el-option>
                                <el-option value="女"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <span>地区</span>
                            <el-select v-model="region" style="width: 80px;">
                                <el-option value="中国"></el-option>
                                <el-option value="美国"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="search-bottom">
                <el-row type="flex" justify="space-between">
                    <el-col :span="8">
                        <div class="grid-content">
                            <span>关联设备</span>
                            <el-select v-model="device" style="width: 90px">
                                <el-option value="ipone"></el-option>
                                <el-option value="xiaomi"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="11">
                        <div class="grid-content date-select">
                            <span>创建时间</span>
                            <el-date-picker
                                style="width: 300px"
                                v-model="date"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-button style="background: #4065E0; color: #ffffff" @click="search">查询</el-button>
                            <el-button @click="reset">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- 表格部分 -->
            <div class="table-date">
                <el-table
                    :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    style="width: 100%"
                    :cell-class-name="setCell"
                    border>
                    <el-table-column
                        prop="nng_uid"
                        label="用户ID"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="nick_name"
                        label="用户名"
                        width="80"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="绑定手机号">
                    </el-table-column>
                    <el-table-column label="性别" width="80">
                        <template slot-scope="scope">
                            {{ getSex(scope.row) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="region"
                        label="地区"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="vin"
                        label="关联车辆">
                    </el-table-column>
                    <el-table-column
                        prop="device"
                        label="登录设备">
                    </el-table-column>
                    <el-table-column
                        prop="third"
                        label="三方登录">
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="用户创建时间">
                    </el-table-column>
                    <el-table-column label="详情" width="80">
                        <template slot-scope="scope">
                            <el-link style="color: #4065E0" @click="handleLook(scope.$index, scope.row)">查看</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageation">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        layout="prev, jumper, slot, next"
                        :page-size="pageSize"
                        :total="total"
                        >
                        <span style="text-align: center; color: #606266; font-weight: 400"> / {{ pageCount }} </span>
                    </el-pagination>
                </div>
            </div>
            
        </el-main>
        <router-view></router-view>
    </div>
</template>

<script>
import { userList } from '@/api/userInfo/userInfo'
import qs from 'qs'
export default {
    name: 'Administration',
    data() {
        return {
            keyword: '',   // 搜索关键词
            state: '启用',  // 状态
            sex: '男',  // 性别
            region: '中国',
            device: 'ipone',    // 关联设备
            date: '',   // 时间
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 1
        }
    },
    computed: {
        pageCount(){
            return Math.ceil(this.total / this.pageSize)
        }
    },
    watch: {
        '$route'(to, from){
            
        }
    },
    
    methods: {
        // 性别
        getSex(row){
            if(row.gender == 1){
                return '女'
            }else if(row.gender == 2){
                return '男'
            }else{
                return '未知'
            }
        },
        // 查看详情
        handleLook(index, row){
            console.log(index, row);
            this.$router.push({ name: 'UserDetail', query: row })
        },
        // 设置单元格居中
        setCell({row, column, rowIndex, columnIndex}){
            return 'table-cell'
        },
        // 当前页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
        },
        // 获取用户列表
        getUserList(){
            var params = qs.stringify({
                appId: 'nng0031',
                row: 10,
                page: 1
            })
            
            userList(params).then(res => {
                // console.log(res)
                this.tableData = res.result
                console.log(this.tableData)
                this.total = this.tableData.length
            })
        },
        // 搜索
        search(){
            this.tableData = this.tableData.filter(item => {
                if(item.nng_uid == this.keyword){
                    return item
                }
            })
        },
        // 重置
        reset(){
            this.keyword = ''
            this.getUserList()
        }
    },
    created(){
        this.getUserList()
    }
}
</script>

<style lang="scss" scoped>
.administration{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    .el-header{
        height: 64px !important;
        line-height: 64px;
        p{
            font-weight: bold;
        }
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 64px;
        .el-row{
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
            .grid-content{
                min-height: 40px;
                line-height: 40px;
                span{
                    padding-right: 10px;
                    font-size: 14px;
                }
            }
        }
        .search-top{
            margin-bottom: 20px;
            .el-row {
                .grid-content{
                    .el-input{
                        width: 300px;
                    }
                }
            }
        }
        .table-date{
            margin-top: 30px;
        }
        
    }
}

</style>

